<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置</title>
    <link rel="stylesheet" href="css/user.css">
    <script type="text/javascript" src="../static/js/style.js"></script>
</head>

<body>
    <div class="b-container">
        <section id="cover"></section>
        <section class="b-top-bar">
            <i id="menu_open" class="fa-solid fa-ellipsis-vertical"></i>
            <h2>设置</h2>
            <a href="./playlist.html"><i class="fa-solid fa-list"></i></a>

            <div id="menu_list" class="menu-left">
                <div class="user">
                    <div class="close-icon">
                        <i class="fa-solid fa-close"></i>
                    </div>
                    <div class="img">
                        <img src="../static/img/user_avater.png">
                    </div>
                    <h2 class="name">Benbinbin</h2>
                </div>
                <ul class="menu_list">
                    <a href="./subscription.html">
                        <li>
                            <i class="fa-solid fa-cart-shopping"></i>
                            <span class="txt">订阅</span>
                        </li>
                    </a>
                    <a href="./explore.html">
                        <li>
                            <i class="fa-brands fa-wpexplorer"></i>
                            <span class="txt">探索</span>
                        </li>
                    </a>
                    <a href="./records.html">
                        <li>
                            <i class="fa-regular fa-rectangle-list"></i>
                            <span class="txt">记录</span>
                        </li>
                    </a>
                    <a href="./user.html">
                        <li class="active">
                            <i class="fa-solid fa-gear"></i>
                            <span class="txt">设置</span>
                        </li>
                    </a>
                </ul>
            </div>
        </section>
        <section class="b-top-information">
            <h1>账号</h1>
            <div class="information">
                <div class="img">
                    <img src="../static/img/user_avater.png">
                </div>
                <div class="content">
                    <h2 class="name">Benbinbin</h2>
                    <p class="email">benthomsonbin@gmail.com</p>
                </div>
                <a href="#" class="sing-out">退出登录</a>
            </div>
        </section>

        <section class="b-option-func">
            <ul class="func-user">
                <li>
                    <i class="me me-update-nickname"></i>
                    <a href="#">修改昵称</a>
                </li>
                <li>
                    <i class="me me-update-password"></i>
                    <a href="#">修改密码</a>
                </li>
                <li>
                    <i class="me me-email"></i>
                    <a href="#">修改邮箱</a>
                </li>
            </ul>
        </section>

        <section class="b-global-func">
            <h1>全局</h1>
            <div id="start" class="func-global">
                <i class="me me-right-func"></i>
                <input type="checkbox" id="rightFunction">
                <div class="slider">
                    <span class="slider-child"></span>
                </div>
                <label for="rightFunction">
                    <span class="txt">向右滑动打开侧边栏</span>
                </label>
            </div>
        </section>

        <section class="b-player-play">
            <div class="play-view">
                <span class="prefix">Hidden Brain - </span>
                <span class="suffix">You 2.0: Did That Re</span>
            </div>
            <div id="me_progess_line" class="me-progess active" style="--height: 2">
                <div class="b-progess-cache"></div>
                <div style="width: 50%;" class="b-progess-sloid"></div>
            </div>
            <div class="player-view">
                <div class="img-cover">
                    <a href="./play.html?bookname=下一本讀什麼%3F&author=瓦基&bookcover=../static/img/exp_cover2.png">
                        <img src="../static/img/exp_cover.png">
                    </a>
                </div>
                <div class="middle-option">
                    <i class="fa-solid fa-rotate-left"></i>
                    <div class="play">
                        <i class="fa-solid fa-play"></i>
                    </div>
                    <i class="fa-solid fa-rotate-right"></i>
                </div>
                <div class="right-search">
                </div>
            </div>
        </section>

        <script src="../static/js/player.js"></script>
        <script src="../static/js/main-menu.js"></script>
    </div>
</body>

</html>